import {Component, ComponentProps, VueComponent} from "vue3-oop";
import {NButton, NButtonGroup, NSpace, NDropdown, NScrollbar} from "naive-ui";
import FormData from "../types/FormData";

interface IProps {
  formData: FormData,
  onPreview: ()=>void
}
@Component()
export default class ToolbarPanel extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    formData:{},
    onPreview:{}
  }

  private saveDraft=()=>{
    const jsonData = this.props.formData.getJsonData();
    console.log(jsonData);
    localStorage.setItem("draft", JSON.stringify(jsonData))
  }

  private loadDraft=()=>{
    const jsonData = JSON.parse(localStorage.getItem("draft") as any);
    this.props.formData.loadFromJsonData(jsonData);
  }

  render(){

    return(
      <NSpace>
        <NButton onClick={this.saveDraft}>存草稿</NButton>
        <NButton onClick={this.loadDraft}>读草稿</NButton>
        <NButton onClick={this.props.onPreview as any}>预览</NButton>
        <NButton onClick={()=>{this.props.formData.clear()}}>清空</NButton>
      </NSpace>
    )
  }
}